<!-- 纯净版示范 -->
<template>
  <!-- 最外层容器监mouse系列事件, 用来做节点拖拽 -->
  <div class="diagram-example-vue-s" id="diagram-example-vue-s">
    <DAGBoard ref="DAGBoard" :DataAll="yourJSONDataFillThere"></DAGBoard>
  </div>
</template>
<script>
// import { diagramExampleData, JSONFromService, nodesBasic } from './data.js'
import { JSONFromService } from './data.js'

export default {
  name: 'Dag',
  components: {},
  props: {},
  data() {
    return {
      jsonTimer: null,
      templateDetailList: [{
          "sourceEquipmentId": 1,
          "sourceTop": 1,
          "sourceEquipmentLocaionX": 54.48275862068964,
          "sourceEquipmentLocaionY": 50.34482758620688,
          "sourcePointId": "ZB060101CYQCKOTP",
          "sourceType": 0,
          "targetEquipmentId": 2,
          "targetEquipmentLocaionX": 38,
          "targetEquipmentLocaionY": 362,
          "targetPointId": "ZB060101CYQCKOTP",
          "targetType": 0
        },
        {
          "targetEquipmentId": 3,
          "targetEquipmentLocaionX": 38,
          "targetEquipmentLocaionY": 362,
          "targetPointId": "ZB060101CYQCKOTP",
          "targetType": 0,
          "sourceEquipmentId": 2,
          "sourceEquipmentLocaionX": 36.551724137931025,
          "sourceEquipmentLocaionY": 177.24137931034477,
          "sourcePointId": "ZB060101CYQCKOTP",
          "sourceType": 0,
          faultLocation: 1
        }
      ],
      yourJSONDataFillThere: { // 用来展示的节点与连线
        nodes: [],
        edges: []
      }
    }
  },
  created() {
    this.getWindowParams();
  },
  mounted() {

  },
  beforeDestroy() {
    this.onkeydown = null // 销毁事件
  },
  methods: {
    // 获取完加载之后的数据，在进行线条渲染
    getWindowParams() {
      clearTimeout(this.jsonTimer);
      console.log(new Date())
      console.log(` 打印后台的数据 ===============  `);
      if (!window.dagJsonDataFillThere) {
        this.jsonTimer = setTimeout(() => {
          this.getWindowParams();
        }, 1000);
        return;
      }
      let errDetail = window.dagJsonDataFillThere || {};
      let getList = errDetail.faultRecordDetailList || [];
      let { edges, nodes } = errDetail.faultRecord;      
      edges = typeof(edges) == "string" ? JSON.parse(edges) : edges;
      nodes = typeof(nodes) == "string" ? JSON.parse(nodes) : nodes;
      // 
      // let edges = "[{\"src_node_id\":100,\"src_output_idx\":0,\"dst_node_id\":101,\"dst_input_idx\":0,\"id\":10,\"type\":\"\",\"isCheck\":false},{\"src_node_id\":101,\"src_output_idx\":0,\"dst_node_id\":102,\"dst_input_idx\":0,\"id\":11,\"type\":\"active\",\"isCheck\":true}]";
      // let nodes = "[{\"pos_x\":54.48275862068964,\"pos_y\":50.34482758620688,\"name\":\"设备1\",\"nodeType\":0,\"iconClassName\":\" el-icon-coin\",\"form\":{\"details\":\"设备元素\",\"createTime\":\"Wed Sep 28 2022\"},\"id\":100,\"in_ports\":[0],\"out_ports\":[0],\"index\":0,\"pointIdJson\":{\"0\":\"ZB060101CYQCKOTP\"},\"deviceId\":1,\"checkCurNode\":false},{\"pos_x\":36.551724137931025,\"pos_y\":177.24137931034477,\"name\":\"设备2\",\"nodeType\":0,\"iconClassName\":\" el-icon-coin\",\"form\":{\"details\":\"设备元素\",\"createTime\":\"Wed Sep 28 2022\"},\"id\":101,\"in_ports\":[0],\"out_ports\":[0],\"index\":1,\"pointIdJson\":{\"0\":\"ZB060101CYQCKOTP\"},\"deviceId\":2,\"checkCurNode\":false},{\"pos_x\":38,\"pos_y\":362,\"name\":\"设备3\",\"nodeType\":0,\"iconClassName\":\" el-icon-coin\",\"form\":{\"details\":\"设备元素\",\"createTime\":\"Wed Sep 28 2022\"},\"id\":102,\"in_ports\":[0],\"out_ports\":[0],\"checkCurNode\":true,\"index\":2,\"pointIdJson\":{\"0\":\"ZB060101CYQCKOTP\"},\"deviceId\":3}]";
      // let getList = this.templateDetailList;
      console.log(JSONFromService)


      // let { edges, nodes } = JSONFromService; 


      /*let nodes = [{
          "pos_x": -259,
          "pos_y": -104,
          "name": "设备2",
          "nodeType": 0,
          "iconClassName": " el-icon-coin",
          "form": {
            "details": "设备元素",
            "createTime": "Fri Sep 30 2022"
          },
          "id": 100,
          "in_ports": [
            0
          ],
          "out_ports": [
            0
          ],
          "checkCurNode": false,
          "index": 0,
          "pointIdJson": {
            "0": "JB060101SYJ3GYS"
          },
          "pointNameJson": {
            "0": "3#水源井功率因数"
          },
          "deviceId": 2,
          "type": "error"
        },
        {
          "pos_x": -407,
          "pos_y": -209,
          "name": "设备1",
          "nodeType": 0,
          "iconClassName": " el-icon-coin",
          "form": {
            "details": "设备元素",
            "createTime": "Fri Sep 30 2022"
          },
          "id": 101,
          "in_ports": [
            0
          ],
          "out_ports": [
            0
          ],
          "checkCurNode": true,
          "index": 1,
          "pointIdJson": {
            "0": "ZB060101CYQCKOTP"
          },
          "pointNameJson": {
            "0": "除油器气出口压力"
          },
          "deviceId": 1
        }
      ]
      let edges = [{
        "src_node_id": 101,
        "src_output_idx": 0,
        "dst_node_id": 100,
        "dst_input_idx": 0,
        "id": 10,
        "type": "",
        "isCheck": true
      }]
*/


      for (let j = 0; j < nodes.length; j++) {
        nodes[j].pos_x = Math.abs( nodes[j].pos_x );
        nodes[j].pos_y = Math.abs( nodes[j].pos_y ) ;
        for (let eq = 0; eq < getList.length; eq++) {
          console.log(getList[eq])
          // 如果有故障标识，在进入节点和线条循环
          if (getList[eq].faultLocation > 0) {
            let targetEdgeId = -1;
            if (nodes[j].deviceId == getList[eq].targetEquipmentId) {
              nodes[j].type = 'error';
              targetEdgeId = nodes[j].id
            }
            console.log(`targetEdgeId : ${targetEdgeId}`)
            for (let i = 0; i < edges.length; i++) {
              edges[i].type = '';
              if (edges[i].dst_node_id == targetEdgeId) {
                edges[i].type = 'error'
              }
            }
          }
        }
      }
      console.log(`nodes 11111111111 ============ `)
      console.log(nodes)

      console.log(`edges 22222 ============ `)
      console.log(edges)


      this.yourJSONDataFillThere.edges = edges || [];
      this.yourJSONDataFillThere.nodes = nodes || [];

      console.log(this.yourJSONDataFillThere);
    },
    // 把根据模型id，获取到的模型数据，转换成可在画布上显示的数据，（线条、和元素）
    renderTemplateToData(data) {
      // let edges = []; // 线条数组
      // let nodes = []; // 设备数组
      // 
      let { edges, nodes } = data.template;
      this.yourJSONDataFillThere.edges = edges ? JSON.parse(edges) : [];
      this.yourJSONDataFillThere.nodes = nodes ? JSON.parse(nodes) : [];
      console.log(`val ====================== `)
      console.log(this.yourJSONDataFillThere)
    }
  }
}
</script>
<style lang="scss">
.diagram-example-vue {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;

  .basic-node {
    margin: 5px auto;
    background: #fff;
    color: black;
    border-radius: 15px;
    height: 30px;
    width: 140px;
    border: 1px solid #289de9;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    user-select: none;
    overflow: hidden;

    .icon {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      color: #fff;
      width: 28px;
      height: 28px;
      background: #289de9;
      border-radius: 50%;
      margin: 1px 10px 1px 1px;
    }

    .node-text {
      flex: 1;
    }
  }
}

/** 给svg添加格子背景，这个是拖拽的svg画布 */
#svgContent {
  background-size: 50px 50px;
  background-image: linear-gradient(0deg,
    transparent 24%,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.05) 26%,
    transparent 27%,
    transparent 74%,
    rgba(255, 255, 255, 0.05) 75%,
    rgba(255, 255, 255, 0.05) 76%,
    transparent 77%,
    transparent),
    linear-gradient(90deg,
    transparent 24%,
    rgba(255, 255, 255, 0.05) 25%,
    rgba(255, 255, 255, 0.05) 26%,
    transparent 27%,
    transparent 74%,
    rgba(255, 255, 255, 0.05) 75%,
    rgba(255, 255, 255, 0.05) 76%,
    transparent 77%,
    transparent);
  background-color: rgb(60, 60, 60) !important;
}
</style>
